<template>
  <div>
    <new-search-bar :searchFixed="true" bgSearch="c-bg-white c-pv24-i" @search="startSearch" @cancel="startSearch" :searchText="searchName"></new-search-bar>
    <div class="c-ph24">
      <div @click="clickGoDetail(index)" class="c-flex-row c-pv24 c-bd-b1" v-for="(item,index) in distributionList" :key="index">
        <div class="c-ww180 c-hh120 c-text-hidden c-br16">
          <CoverImg coverSizeClass="c-w100 c-h c-text-hidden c-br16" imgClass="c-br16" :coverUrl="$addXossFilter(item.cover, require('@/assets/defult270.png'))" />
        </div>
        <div class="c-flex-column c-pl20 c-flex-grow1 c-w0 c-pv4 c-justify-sb">
          <div class="c-fs24 c-lh36 c-text-ellipsis2">
            <span v-if='item.promotionType == "1"' class="c-fs16 theme-fc theme-bd1 c-ph8 c-pv2 c-br20 c-mr10">拼团</span>
            <span>{{item.name}}</span>
          </div>
          <div class="c-flex-row c-aligni-center">
            <span v-if="item.price * 1 > 0" class="c-fs20 c-fc-xmlred c-fw600">{{'￥' | iosPriceFilter}}</span>
            <span class="c-fc-xmlred c-fw600" :class="item.price * 1 > 0 ? 'c-fs26' : 'c-fs22'">{{(item.price * 1) | moneyStr}}</span>
            <span v-if="item.markPrice * 1 > 0" class="c-text-decoration-through c-pl10 c-fs18 c-fc-gray">{{'￥' | iosPriceFilter}}{{item.markPrice | moneyStr}}</span>
            <span class="c-flex-grow1 c-w0 c-textAlign-r c-fs20 c-fc-gray">{{item.isUpdating && item.isSync == 1 ? '暂含' : '共含'}}{{item.subCount}}节</span>
          </div>
        </div>
      </div>

      <loading-status-tem :dataStatus="dataStatus" noDataText="暂无商品"></loading-status-tem>
    </div>
  </div>
</template>

<script>
import newSearchBar from "@/components/templates/common/newSearchBar.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import CoverImg from '@/components/templates/common/coverImg.vue';
import { utilJs } from "@/utils/common.js";
let pageIndex = 1;
let LIMIT = 10;
export default {
  name: "DistributionList",
  components: {
    loadingStatusTem,
    newSearchBar,
    CoverImg
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") || "mb5_default",
      themeName: localStorage.getItem('themeName') ? localStorage.getItem('themeName') : 'mb5',
      searchName: '',
      dataStatus: 'HAS_MORE_DATA',
      distributionList: [],
      showNavBottomBar: false,
      orderType: 0
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() { },
  methods: {
    startSearch(e) {
      this.searchName = e.searchValue;
      this.distributionList = [];
      pageIndex = 1;
      this.getdistributionList();
    },
    clickGoDetail(index) {
      switch (this.distributionList[index].proType * 1) {
        case 1:
          this.$routerGo(this, "push", {
            path: "/homePage/column/columnDetail",
            query: {
              distribution: '1',
              courseId: -1,
              extId: this.distributionList[index].dcId,
              ckFrom: this.distributionList[index].promotionType == 1 ? global.ckFrom.collageColumn : global.ckFrom.column,
            }
          });
          break;
      }
    },
    getdistributionList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      let dUrl = this.orderType
        ? global.apiurl + "distributionMarkets?page=" + pageIndex + '&limit=' + LIMIT + '&name=' + this.searchName + '&type=' + this.orderType
        : global.apiurl + "distributionMarkets?page=" + pageIndex + '&limit=' + LIMIT + '&name=' + this.searchName;
      utilJs.getMethod(
        dUrl,
        res => {
          if (pageIndex == 1) {
            this.distributionList = res.data;
          } else {
            this.distributionList = [...this.distributionList, ...res.data];
          }
          if (res.data && (res.data.length < LIMIT)) {
            this.dataStatus = pageIndex == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
          } else {
            this.dataStatus = 'HAS_MORE_DATA';
            pageIndex++;
          }
        },
        failRes => {
          this.dataStatus = 'DATA_ERROR';
        }
      );
    },
    //分享
    wechatShare: function () {
      let title = '内容专区';
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = "点击查看详情";
      utilJs.wechatConfig(shareUrl, title, "", shareDesc);
    },
    //手机端分享
    appShare: function () {
      let title = '内容专区';
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = "点击查看详情";
      utilJs.appShareTrue(title, "", shareUrl, shareDesc);
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.distributionList.length > 0) {
          this.getdistributionList();
        }
      });
    },
    initData() {
      pageIndex = 1;
      this.searchName = '';
      this.dataStatus = 'HAS_MORE_DATA';
      this.distributionList = [];
      this.orderType = this.$route.query.orderType ? this.$route.query.orderType : null;
      this.getdistributionList();
      let companyAuth = localStorage.getItem("companyAuth") && JSON.parse(localStorage.getItem("companyAuth"));
      if (companyAuth.companyNav && companyAuth.companyNav.length > 0) {
        let arrClockFilter = companyAuth.companyNav.filter((item) => {
          return item.navType == 6;
        });
        this.showNavBottomBar = arrClockFilter.length > 0;
      }
    },
  },
  activated() {
    setDocumentTitle("内容专区");// eslint-disable-line
      // this.getMore();
    this.initData()
    // this.initData();
    this.wechatShare();
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    // this.dataStatus = 'NO_MORE_DATA';
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
};
</script>